<template>
    <div class="xtx-pagination" v-if="total>0">
        <a @click="changePage(myCurrentPage-1)" v-if="myCurrentPage>1" href="javascript:;">上一页</a>
        <a v-else href="javascript:;" class="disabled">上一页</a>
        <span v-if="pager.start>1">...</span>
        <a href="javascript:;" @click="myCurrentPage = i" v-for="i in pager.btnArr" :key="i" :class="{active:i === myCurrentPage}">{{i}}</a>
        <span v-if="pager.end < pager.pageCount">...</span>
        <a @click="changePage(myCurrentPage+1)" v-if="myCurrentPage<pager.pageCount" href="javascript:;">下一页</a>
        <a v-else href="javascript:;" class="disabled">下一页</a>
    </div>
</template>
<script>
import { computed, ref, watch } from 'vue';
export default {
    name: "XtxPagination",
    props:{
        currentPage:{
            type:Number,
            default:1
        },
        pageSize:{
            type:Number,
            default:10
        },
        total:{
            type:Number,
            default:100
        }
    },
    setup(props,{emit}){
        // 1、约定按钮的个数
        const count = 5
        // 2、当前显示的页吗
        const myCurrentPage = ref(1)
        // 3、总页数 = 总条数 / 每一页条数 向上取证
        const myTotal = ref(100)
        const myPageSize = ref(10)
        // 总页数 起始按钮 结束按钮 按钮数组
        const pager = computed(()=>{
            // 总页数
            const pageCount = Math.ceil(myTotal.value / myPageSize.value)
            // 起始按钮 结束按钮 按钮数组
            const offset = Math.floor(count / 2)
            let start = myCurrentPage.value - offset
            let end = start + count - 1
            if (start < 1) {
                start = 1
                end = (start + count - 1) > pageCount ? pageCount : (start + count - 1)
            }
            if (end > pageCount) {
                end = pageCount
                start = (end - count + 1) < 1 ? 1 : (end - count + 1)
            }
            const btnArr = []
            for (let i = start; i <= end; i++ ) {
                btnArr.push(i)
            }
            return {pageCount,btnArr,start,end}
        })
        // 上下页
        const changePage = (newPage) =>{
            if (myCurrentPage.value !== newPage) {
                myCurrentPage.value = newPage
                // 通知父组件最新页码
                emit('current-change', newPage)
            }
        }
        // 监听props的变化
        watch(props,()=>{
            myTotal.value = props.total
            myPageSize.value = props.pageSize
            myCurrentPage.value = props.currentPage
        },{immediate:true})
        return { myCurrentPage,pager,changePage }
    }
};
</script>
<style scoped lang="less">
.xtx-pagination {
    display: flex;
    justify-content: center;
    padding: 30px;
    > a {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #e4e4e4;
        border-radius: 4px;
        margin-right: 10px;
        &:hover {
            color: @xtxColor;
        }
        &.active {
            background: @xtxColor;
            color: #fff;
            border-color: @xtxColor;
        }
        &.disabled {
            cursor: not-allowed;
            opacity: 0.4;
            &:hover {
                color: #333;
            }
        }
    }
    > span {
        margin-right: 10px;
    }
}
</style>